<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>YAML | Example &quot;flexible grids&quot;</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="css/layout_grids.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_grids.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div class="page_margins">
  <div class="page">
    <div id="header">
      <div id="topnav">
        <!-- start: skip link navigation -->
        <a class="skip" href="#navigation" title="skip link">skip to navigation</a><span class="hideme">.</span>
        <a class="skip" href="#content" title="skip link">skip to content</a><span class="hideme">.</span>
        <!-- end: skip link navigation -->
        <span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span> </div>
      <h1>Example | Beispiel <em>&laquo;Flexible Grids&raquo;</em> </h1>
      <span>YAML &#8226; (X)HTML/CSS Framework</span>    </div>
    <!-- begin: main navigation #nav -->
    <div id="nav">
      <!-- skiplink anchor: navigation -->
      <a id="navigation" name="navigation"></a>
      <div class="hlist">
        <ul>
          <li><a href="../index.html">Table Of Contents</a></li>
          <li><a href="flexible_grids2.html">Next Example</a></li>
          <li><a href="3col_advanced.html">Previous Example</a></li>
        </ul>
      </div>
    </div>
    <!-- end: main navigation -->
    <!-- begin: main content area #main -->
    <div id="main"> <a id="content" name="content"></a>
      <!-- skiplink anchor: Content -->
      <div class="subcolumns">
        <div class="c66l">
          <div class="subcl">
            <h2>Blog</h2>
            <h4>Entry #1 </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus,  ... </p>
            <p><a href="#" class="noprint">more ...</a> </p>
            <h4>Entry #2</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus,  ... </p>
            <p><a href="#" class="noprint">more ...</a> </p>
            <h4>Entry #3</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus,  ... </p>
            <p><a href="#" class="noprint">more ...</a> </p>
            <h4>Entry #4</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus,  ... </p>
            <p><a href="#" class="noprint">more ...</a> </p>
          </div>
        </div>
        <div class="c33r">
          <div class="subcolumns">
            <div class="c50l">
              <div class="subcr">
                <h2>Sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. ... </p>
              </div>
            </div>
            <div class="c50r">
              <div class="subcr">
                <h2>Comments</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. ... </p>
              </div>
            </div>
          </div>
          <div class="subc">
            <div class="info">
              <h2>About this example</h2>
              <p>This example demonstrates the usage of YAML's flexible <a href="http://www.yaml.de/en/documentation/practice/subtemplates.html">grid elements (subtemplates)</a> for  layout purposes. There are no columns (<code>#col1</code>, <code>#col2</code> or <code>#col3</code>) used in the markup. The grid elements can be nested and therefore provide an almost infinite variety of page designs.</p>
              <p>This example is explained in detail in the <a href="http://www.yaml.de/en/documentation/practice/application-examples/layout-development-with-subtemplates.html">documentation</a>.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="subcolumns coolsubcol">
        <div class="c33l">
          <div class="subcl">
            <h3>Article Archive </h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra.   ... </p>
          </div>
        </div>
        <div class="c33l">
          <div class="subcl">
            <h3>Latest Comments </h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. ... </p>
          </div>
        </div>
        <div class="c33r">
          <div class="subcr">
            <h3>Monthly Archive </h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra.  ... </p>
          </div>
        </div>
      </div>
    </div>
    <!-- end: #main -->
    <!-- begin: #footer -->
    <div id="footer">Footer with copyright notice and status information<br />
Layout based on <a href="http://www.yaml.de/">YAML</a></div>
    <!-- end: #footer -->
  </div>
</div>
</body>
</html>
